<template>
  <div class="palyShow" ref="swiper">
    <div class="banaer">
      <div class="swiper-wrapper">
        <!-- <div class="swiper-slide" v-for="carouse in list" :key="carouse.id">
        <img :src="carouse.imgUrl" />
      </div> -->
        <div class="swiper-slide">
          <img src="../../assets/images/banner.png" />
        </div>
        <div class="swiper-slide">
          <img src="../../assets/images/banner.png" />
        </div>
        <div class="swiper-slide">
          <img src="../../assets/images/banner.png" />
        </div>
        <div class="swiper-slide">
          <img src="../../assets/images/banner.png" />
        </div>
        <div class="swiper-slide">
          <img src="../../assets/images/banner.png" />
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
    <div class="banaer-bot">
      “Open Source Development Systemfor Thousands of Lindustties”
    </div>
  </div>
</template>

<script>
import Swiper from "../../../node_modules/swiper/swiper-bundle.min.js";
export default {
  name: "index",
  props: {
    list: Array,
  },
  methods: {
    init() {
      new Swiper(this.$refs.swiper, {
        direction: "horizontal", // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay: true,
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
        },

        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    },
  },
  watch: {
    list: {
      handler(val) {
        if (val.length <= 0) return;
        this.$nextTick(() => {
          this.init();
        });
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style scoped lang="less">
// .swiper-container {
//   width: 100%;
//   height: 480px;
//   .swiper-pagination {
//     ::v-deep .swiper-pagination-bullet {
//       width: 32px !important;
//       height: 6px;
//       border-radius: 10px;
//       background: rgba(255, 255, 255, 0.35);
//     }
//     ::v-deep .swiper-pagination-bullet-active {
//       width: 32px !important;
//       height: 6px;
//       border-radius: 10px;
//       background: 0 !important;
//       background-color: #ffffff !important;
//       // opacity: 0;
//     }
//   }
//   .swiper-slide {
//     width: 100%;
//     height: 100%;
//   }
// }
@media screen and (min-width: 1032px) {
  .base {
    width: 1032px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  .palyShow {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: #fff;
    .banaer {
      .base;
      height: 480px;
      // background-color: blue;
      .swiper-pagination {
        ::v-deep .swiper-pagination-bullet {
          width: 32px !important;
          height: 6px;
          border-radius: 10px;
          background: rgba(255, 255, 255, 0.35);
        }
        ::v-deep .swiper-pagination-bullet-active {
          width: 32px !important;
          height: 6px;
          border-radius: 10px;
          background: 0 !important;
          background-color: #ffffff !important;
          // opacity: 0;
        }
      }
      .swiper-slide {
        width: 100%;
        height: 100%;
      }
    }
    .banaer-bot {
      .base;
      background-color: skyblue;
      margin-bottom: 20px;
    }
  }
}
@media screen and (min-width: 769px) and (max-width: 1031px) {
  .base {
    width: 768px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  .palyShow {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: #fff;
    .banaer {
      .base;
      height: 480px;
      // background-color: blue;
      .swiper-pagination {
        ::v-deep .swiper-pagination-bullet {
          width: 32px !important;
          height: 6px;
          border-radius: 10px;
          background: rgba(255, 255, 255, 0.35);
        }
        ::v-deep .swiper-pagination-bullet-active {
          width: 32px !important;
          height: 6px;
          border-radius: 10px;
          background: 0 !important;
          background-color: #ffffff !important;
          // opacity: 0;
        }
      }
      .swiper-slide {
        width: 100%;
        height: 100%;
      }
    }
    .banaer-bot {
      .base;
      background-color: skyblue;
      margin-bottom: 20px;
    }
  }
}
@media screen and (max-width: 768px) {
  .base {
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  .palyShow {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: #fff;
    .banaer {
      .base;
      height: 200px;
      background-color: blue;
    }
    .banaer-bot {
      .base;
      text-align: center;
      background-color: skyblue;
      margin-bottom: 20px;
    }
  }
}
</style>
